<template>
  <div class="divisional">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="inputBox">
          <div class="v_box" v-for="(item,index) in list_1" :key="index">
            <label for>{{item.name}}</label>
            <el-input v-model="item.input_val" size="small" placeholder="请输入内容"></el-input>
          </div>
          <div class="v_box">
            <el-button size="small" type="primary" @click="checkInfo">查询</el-button>
            <el-button size="small" type="primary" @click="reset">重置</el-button>
            <el-button size="small" type="primary" @click="add">新增</el-button>
          </div>
          <div class="v_box"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-table
          :data="tableData"
          :header-cell-style="{background:'LightYellow	',color:'black'}"
          max-height="400"
          style="width: 100%"
        >
          <el-table-column prop="name" label="用户名" width></el-table-column>
          <el-table-column prop="usernum" label="用户码"></el-table-column>
          <el-table-column prop="createer" label="创建人"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column prop="modifyer" label="修改人"></el-table-column>
          <el-table-column prop="modifyTime" label="修改时间"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="edit(scope.row)" type="primary" size="small">编辑</el-button>
              <el-button @click="deleteinfo(scope.row)" type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="pageBox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog :visible.sync="isAdd" width="50%">
      <span slot="title">角色新增</span>
      <div class="mainInfoBox">
        <div class="infoBox">
          <label for>角色名称:</label>
          <el-input v-model="roleName" size="small" placeholder="请输入内容"></el-input>
        </div>
        <div class="infoBox">
          <label for>权限:</label>
          <el-select v-model="role" size="small" placeholder="请选择">
            <el-option
              v-for="item in roleoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isAdd = false">取 消</el-button>
        <el-button type="primary" @click="isAdd = false">保存</el-button>
      </span>
    </el-dialog>

    <el-dialog class="speDialog" :visible.sync="isEdit" width="60%">
      <span slot="title">用户编辑</span>
      <div class="mainInfoBox">
        <div class="infoBox">
          <label for>用户名称:</label>
          <el-input v-model="roleName" size="small" placeholder="请输入内容"></el-input>
        </div>
        <div class="infoBox">
          <label for>用户码:</label>
          <el-input v-model="roleName" size="small" placeholder="请输入内容"></el-input>
        </div>
        <div class="infoBox">
          <label for>机构:</label>
          <el-select v-model="role" size="small" placeholder="请选择">
            <el-option
              v-for="item in roleoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="infoBox"></div>
        <div class="infoBox">
          <label for>角色:</label>
          <el-select v-model="role" size="small" placeholder="请选择">
            <el-option
              v-for="item in roleoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="infoBox">
          <label for>岗位:</label>
          <el-select v-model="role" size="small" placeholder="请选择">
            <el-option
              v-for="item in roleoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEdit = false">取 消</el-button>
        <el-button type="primary" @click="isEdit = false">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { Message } from "element-ui";
export default {
  data() {
    return {
      isEdit: false,
      roleName: "",
      role: "",
      radio: "",
      isInfodetail: false,
      currentPage: 1,
      total: 0,
      pageSize: 5,
      list_1: [
        {
          name: "用户名",
          input_val: "",
        },
        {
          name: "用户码",
          input_val: "",
        },
      ],
      lost: "",
      roleoptions: [
        {
          value: "1",
          label: "试试",
        },
        {
          value: "2",
          label: "三四十",
        },
      ],
      tableData: [
        {
          name: "手术室",
          usernum: "123123123",
          createer: "三四十",
          createTime: "20200908",
          modifyer: "张三",
          modifyTime: "20200909",
        },
      ],
      isAdd: false,
    };
  },
  created() {
    this.checkInfo();
  },
  methods: {
    add() {
      this.isAdd = true;
    },
    handleCurrentChange(data) {
      this.currentPage = data;
      this.checkInfo();
    },
    handleSizeChange(data) {
      console.log(data, "handleSizeChange");
      this.pageSize = data;
      this.checkInfo();
    },
    deleteinfo(val) {
      this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    edit(data) {
      console.log(data, "sss");
      this.isEdit = true;
    },
    reset() {
      this.list_1[0].input_val = "";
      this.list_1[1].input_val = "";
    },
    checkInfo() {
      //   所属银行
      let name = this.list_1[0].input_val;
      // 身份证
      let peopleId = this.list_1[1].input_val;
      // s手机号
      // 是否逾期
      let options = {
        name: name,
        peopleId: peopleId,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };
      this.$axios({
        method: "post",
        url: "/search",
        data: options,
      })
        .then((res) => {
          console.log(res, "查询数据");
          if (res.data.code == 200) {
            // this.tableData = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            Message.warning(res.message);
          }
        })
        .catch((err) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.divisional {
  /deep/ .el-row:nth-child(1) {
    width: 100%;
    height: 20vh;
    // background: pink;
    padding: 0;
    margin: 0;
    .el-col {
      padding: 0;
      height: inherit;
      box-sizing: border-box;
      background: #ffffff;
      overflow: hidden;
      div:nth-child(1) {
        width: 100%;
        height: inherit;
        //   background: yellowgreen;
        display: flex;
        flex-wrap: wrap;
        // justify-content: flex-start;
        justify-content: space-around;
        box-sizing: border-box;
        padding-left: 30px;
        padding-top: 30px;
        overflow-y: auto;
        .v_box {
          width: 20%;
          height: 8vh;
          margin-left: 15px;
          margin-right: 40px;
          // margin-bottom: 10px;
          // background: chocolate;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          padding: 0;
          border: none;
          div {
            padding: 0;
          }
          &:nth-child(10) {
            div {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              /deep/ .el-select {
                width: 40% !important;
              }
            }
          }
          &:nth-child(3) {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            padding-top: 10px;
            .el-button {
              width: 70px;
              height: 30px;
            }
          }
        }
      }
    }
  }
  /deep/ .el-row:nth-child(2) {
    width: 100%;
    height: 70vh;
    // background: pink;
    padding: 0;
    margin: 0;
    margin-top: 10px;
    table {
      tbody {
        tr {
          td {
            .cell {
              box-sizing: border-box;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: normal !important;
              line-height: inherit;
              //   padding-right: 10px;
            }
          }
        }
      }
    }
  }
  .pageBox {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  /deep/ .el-dialog {
    .mainInfoBox {
      width: 100%;
      height: 100px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: flex-start;
      flex-wrap: wrap;
      overflow-y: auto;
      box-sizing: border-box;
      .infoBox {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 40px;
        width: 40%;
        label {
          width: auto;
          display: inline-block;
        }
        .el-input {
          width: 80%;
        }
      }
    }
  }
  .speDialog {
    .mainInfoBox {
      width: 100%;
      height: 30vh;
      padding-left: 20px;
      .infoBox {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 40px;
        width: 40%;
        label {
          min-width: 60px;
          text-align: right;
          display: inline-block;
          margin-right: 4px;
        }
        .el-input {
          width: 55%;
        }
      }
    }
  }
}
</style>